import React, { Component } from 'react'
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  Alert,
  Switch,
} from 'react-native'

export default class index extends Component {

  constructor() {
    super()
    this.state = {
      isHidenStatusBar: true,
    }
  }

  handleSwitchToggleChange = () => {
    this.setState(
      {
        isHidenStatusBar: !this.state.isHidenStatusBar
      }
    )
  }

  render() {
    return (
      <View style={[styles.container]}>
        <StatusBar
          hidden={this.state.isHidenStatusBar}
          backgroundColor='blue' // 仅在 Android 应用下有效
          barStyle='light-content'
        />

        <View style={[styles.form]}>
          <View style={[styles.formLabel]}>
            <Text>隐藏开关:</Text>
          </View>

          <Switch
            style={[styles.swich]}
            value={this.state.isHidenStatusBar}
            trackColor={{
              true: '#5e7ce0',
              false: '#aaa'
            }}
            thumbColor={'#fff'}
            onValueChange={this.handleSwitchToggleChange}
          />
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  form: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  formLabel: {
    width: 80,
    height: 30,
    backgroundColor: '#ffa',
    alignItems: 'center',
    justifyContent: 'center',
  },
  swich:{
    width: 80,
    height: 30,
    backgroundColor: 'pink'
  }
})
